<template>
    <Card  class="homeIndex-safetyComp">
        <p slot="title">安全中心</p>
        <div class="row_item">
            <div class="float_left width_100px">绑定手机：</div>
            <div class="margin_left_100">
                <div class="float_right width_100px">
                    <button class="btn btn-primary" @click="bindMobile">{{mobile ? '修改' : '设置'}}</button>
                </div>
                <div class="margin_right_100">
                    可用于登录、密码找回等安全保护{{showMobile}}
                </div>
            </div>
        </div>

        <div class="row_item">
            <div class="float_left width_100px">密码修改：</div>
            <div class="margin_left_100 margin_top_10">
                <div class="float_right width_100px">
                    <button class="btn btn-primary" @click="updatePwd">{{mobile ? '修改' : '设置'}}</button>
                </div>
                <div class="margin_right_100">
                    修改密码前，请先绑定手机
                </div>
            </div>
        </div>
    </Card >
</template>

<script>

    export default {
        name: 'safetyComp',
        props: {
        	mobile: {
        		type: String,
                default: ''
            }
        },
        data: function () {
            return {
                chargeModal: true,
                formValidate: {}
            }
        },
        computed: {
            showMobile: function(){
            	return '/' + this.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
            }
        },
        methods: {
            bindMobile () {
            	//绑定手机号传0；解绑手机号传1（修改手机号之前先解绑）;
            	this.$emit('bind-mobile', this.mobile ? 1 : 0);
            },

            updatePwd () {
                if(!this.mobile){
                    this.bindMobile();
                }else{
                    this.$emit("update-pwd");
                }
            }
        },
        components: {}
    }
</script>

<style scoped lang="scss">
    .homeIndex-safetyComp {

        /*小标题*/
        .heading-sm {
            position: relative;
            color: #222;
            font-size: 14px;
            font-weight: 100;
            line-height: 24px;
            margin: 20px 0;
        }

    }
</style>
